Next.js入門 1 セットアップと起動

前：Next.js入門

次：Next.js入門 2 ルーティングの仕組み

Node.jsとNext.jsをセットアップして、起動してみましょう

テキストエディターのセットアップ

プログラミングをするためには、テキストエディターが必要です

また、Node.jsをセットアップしたりNext.jsをセットアップするためにはターミナルでコマンドを入力する必要があります

テキストエディターとターミナルが融合しているVisual Studio Codeは非常に便利です

以下の記事を参考に、Visual Studio Code（以下、VSCode）をインストールしてください

Visual Studio Codeをセットアップする

Visual Studio CodeはWindowsでもmacOSでもLinuxでも動きます

以降は全人類がVSCodeを使っていることを前提に説明していきます

VSCodeを起動して、ターミナルを開く

VSCodeのメニュー「ターミナル」→「新しいターミナル」を選択

または、キーボードでctrl+@を押します

macOSでもこのショートカットキーでいいのかは不明yuiseki.icon

Node.jsとNext.jsのセットアップ

以降はターミナル内での作業です

Node.jsのセットアップ

Next.jsのセットアップや実行のためにはNode.jsが必要です

Node.jsを、OSのパッケージ管理システムやインストーラーではインストールしないでください

インストールしてしまっても慌てることはありません

システムにインストールされたNode.jsのことは完全に忘れて放置しておきましょう

以下の記事を参考に、nvmを使って、Node.jsをセットアップしてください

Node.jsをインストールする

Next.jsのセットアップ

/neet/端末 | ターミナル | Terminalで以下のコマンドを実行しましょう

code:bash

npx create-next-app --ts hoge

code:text

Need to install the following packages:

create-next-app

Ok to proceed? (y)

と訊かれるのでyキーを押します

hogeというディレクトリが増えているはずです

Next.jsプロジェクトhogeディレクトリでの作業

以降はVSCodeでの作業です

VSCodeのメニュー「ファイル」→「フォルダーを開く」でhogeを開きましょう

またターミナルを開きます

VSCodeのメニュー「ターミナル」→「新しいターミナル」を選択

または、キーボードでctrl+@を押します

以降はディレクトリhogeにおけるターミナル内での作業です

Next.jsの起動

code:bash

npm run dev

code:text

hoge@0.1.0 dev

next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

event - compiled successfully

と表示されれば起動は成功です！！

これでNext.jsの開発サーバーが起動している状態です

以降、ターミナルは放置して開発サーバーを動かし続けておきましょう

再起動しなくても変更は自動的に即座に反映されます

停止するためにはキーボードでctrl+cを押します

以降はブラウザでの作業です

Next.jsにWebブラウザでアクセスしてみる

URL http://localhost:3000/ をクリックして開きます

https://gyazo.com/3817bc16f48c3190ff1520fe151135f4

こういう画面が表示されるはずです！！

ここまでで、Node.jsとNext.jsのセットアップと起動ができました